<template>
    <div class="management-fee-payment-list">
        <el-dialog title="99" :visible.sync="dialogVisible" width="60%" v-dialogDrag top="0" :show-close="false"
            :before-close="handleClose">
            <div slot="title">
                <span class="dialog_title">管理费到期提醒</span>
                <el-button class="close-btn" size="mini" plain @click="handleClose">关闭 <i class="el-icon-close el-icon--right"></i>
                </el-button>
            </div>
            <div class="box">
                <div class="table" style="height: 100%">
                    <li class="list_title">
                        <span class="large">墓穴位置</span>
                        <span class="title_item">使用人姓名</span>
                        <span class="title_item">购墓人</span>
                        <span class="title_item">联系电话</span>
                        <span class="title_item">管理费到期日期</span>
                    </li>
                    <vue-seamless-scroll :data="list" class="seamless-warp" :class-option="defaultOption">
                        <ul style="padding: 0">
                            <li v-for="(item, index) in list" :key="index"
                                :class="['list_item', item.QuBie == '1' ? 'other' : '']">
                                <span class="large">{{ item.FullPath }}</span>
                                <span class="item_info">{{ item.NameList }}</span>
                                <span class="item_info">{{ item.ContactName }}</span>
                                <span class="item_info">{{ item.Phone }}</span>
                                <span class="item_info">{{ item.EndDate }}</span>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import axios from 'axios'
export default {
    name: "CarMap",
    components: {
        vueSeamlessScroll
    },
    props: {
        dialogVisible: {
            type: Boolean
        }
    },
    computed: {
        defaultOption() {
            return {
                step: 0.8,
                limitMoveNum: 8,
                openTouch: false,
                hoverStop: false, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    data() {
        return {
            classOption: {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: false, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            },
            list: [],
        }
    },
    methods: {
        handleClose() {
            this.$emit('closeDialog')
        },
        async getListData() {
            let { data } = await axios({
                method: 'post',
                url: `${this.baseUrl}?action=GetLoadGLF`
            })
            if (data._issuccess !== 1) return this.$message.error(data._msg)
            this.list = data._data
        }
    },
    mounted() {
        this.getListData();
    },
    watch: {
        dialogVisible(newValue) {
            if (newValue) {
                this.$nextTick(() => {
                    this.getListData();
                })
            }
        }
    },
    destroyed() {
        // this.ws.close()
    }

}
</script>
  
<style scoped lang="scss">
@import '@/assets/scss/mixin.scss';

.management-fee-payment-list {
    margin-top: .25rem;

    .box {
        background: #072E4E;
        height: 5.075rem;
        padding: .275rem .0875rem;

        .list_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: .5rem;
            background: #044269;

            .title_item {
                text-align: center;
                flex: 1;
                font-size: .175rem;
                font-weight: 600;
                color: #1DF9FC;
            }

            .large {
                flex-shrink: 0;
                width: 1.875rem;
                text-align: center;
                font-size: .175rem;
                font-weight: 600;
                color: #1DF9FC;
            }
        }

        .seamless-warp {
            width: 100%;
            height: 4.0375rem;
            overflow: hidden;
            font-size: .15rem;
            .list_item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: .5rem;
                color: #1DF9FC;

                .item_info {
                    flex: 1;
                    text-align: center;
                }

                .large {
                    flex-shrink: 0;
                    width: 1.875rem;
                    text-align: center;
                }
            }

            .list_item.other {
                color: #ff9c5d;
            }

            .list_item:nth-child(2n) {
                background: #044269;
            }
        }
    }

    .dialog_title {
        @include fs(#1DF9FC, .225rem, .35rem, bold);
        margin: 0 .1rem;
        font-family: Source Han Sans CN;
    }
    
    .close-btn{
        font-size: .15rem;
        padding: 0.1rem;
    }

    /deep/ .el-dialog {
        background: #082843;
        position: relative;

        .title {
            border-bottom: 1px solid #1DF9FC;
        }

        .el-dialog__header .el-button {
            position: absolute;
            top: .125rem;
            right: .25rem;
            background: none;
            border: 1px solid #FF9C5D;
            color: #FF9C5D;
        }

        .el-dialog__body {
            padding-top: 0;
        }

        .content_chart {

            .charts {
                @include flex();
                margin-top: .25rem;

                &>div {
                    width: 49%;
                    height: 3.4rem;

                    .dialogChart {
                        height: 3.2rem;
                    }

                }

            }
        }


    }


    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width: 0;
    }
}
</style>
  